<template>
  <el-main>
    <!-- 查询条件 -->
    <el-form
      :model="searchModel"
      label-width="80px"
      :inline="true"
      size="small"
    >
      <el-form-item>
        <el-input
          v-model="searchModel.name"
          clearable
          placeholder="请输入设备名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search(pageNo, pageSize)"
          >查询</el-button
        >
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table
      :data="deviceList"
      :height="tableHeight"
      border
      stripe
      style="width: 100%; margin-bottom: 10px"
    >
      <el-table-column
        prop="id"
        label="设备编号"
        align="center"
      ></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="lng" label="经度"></el-table-column>
      <el-table-column prop="lat" label="纬度"></el-table-column>
      <el-table-column prop="creatTime" label="时间"></el-table-column>
      <el-table-column label="操作" align="center" width="290">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
            >编辑
          </el-button>
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具栏 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加和修改设备窗口 -->
    <system-dialog
      :title="deviceInformationDialog.title"
      :visible="deviceInformationDialog.visible"
      :width="deviceInformationDialog.width"
      :height="deviceInformationDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="deviceInformation"
          ref="deviceInformationForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item
            label="设备编号"
            prop="id"
            v-if="
              deviceInformationDialog.title === '新增设备基本信息'
                ? true
                : false
            "
          >
            <el-input v-model="deviceInformation.id"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="deviceInformation.name"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="lng">
            <el-input v-model="deviceInformation.lng"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="deviceInformation.lat"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
//导入设备基本信息api脚本
import deviceInformationApi from "@/api/deviceInformation";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";
export default {
  //注册组件
  components: { SystemDialog },
  data() {
    return {
      //查询条件
      searchModel: {
        name: "",
        pageNo: 1,
        pageSize: 10,
      },
      //设备对象
      deviceInformation: {
        id: "",
        name: "",
        lng: 0,
        lat: 0,
        creatTime: "",
      },
      //添加和修改角色窗口属性
      deviceInformationDialog: {
        title: "",
        visible: false,
        height: 200,
        width: 600,
      },
      rules: {
        id: [{ required: true, trigger: "blur", message: "请输入设备编码" }],
        name: [{ required: true, trigger: "blur", message: "请输入设备名称" }],
        lng: [{ required: true, trigger: "blur", message: "请输入经度" }],
        lat: [{ required: true, trigger: "blur", message: "请输入纬度" }],
      },
      deviceList: [],
      tableHeight: 0, //表格高度
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
    };
  },
  //初始化时调用
  created() {
    //调用查询角色列表的方法
    this.search();
  },
  //挂载后调用
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 220;
    });
  },
  methods: {
    /**
     * 当每页数量发生变化时触发该事件
     */
    handleSizeChange(size) {
      this.pageSize = size; //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /**
     * 当页码发生变化时触发该事件
     */
    handleCurrentChange(page) {
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    /**
     * 设备查询
     */
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo; //当前页码
      this.searchModel.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await deviceInformationApi.getDeviceInformationListByNameApi(
        this.searchModel
      );
      //执行成功
      if (res.success) {
        //设备列表
        this.deviceList = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    /**
     * 打开添加窗口
     */
    openAddWindow() {
      //清空表单数据
      this.$resetForm("deviceInformationForm", this.deviceInformation);
      this.deviceInformationDialog.title = "新增设备基本信息"; //设置窗口标题
      this.deviceInformationDialog.visible = true; //显示窗口
    },
    /**
     * 打开编辑窗口
     */
    handleEdit(row) {
      //数据回显
      this.$objCopy(row, this.deviceInformation); //将当前编辑的数据复制到role对象中
      //设置窗口标题
      this.deviceInformationDialog.title = "编辑设备基本信息";
      //显示编辑角色窗口
      this.deviceInformationDialog.visible = true;
    },
    /**
     * 删除设备
     */
    async handleDelete(row) {
      //确认是否删除
      let confirm = await this.$myconfirm("确定要删除该数据吗?");
      if (confirm) {
        //发送删除请求
        let res = await deviceInformationApi.deleteById({ id: row.id });
        //判断是否成功
        if (res.success) {
          //成功提示
          this.$message.success(res.message);
          //刷新
          this.search(this.pageNo, this.pageSize);
        } else {
          //失败提示
          this.$message.error(res.message);
        }
      }
    },
    /**
     * 窗口事件
     */
    onClose() {
      this.deviceInformationDialog.visible = false;
    },
    /**
     * 窗口确认事件
     */
    onConfirm() {
      //表单验证
      this.$refs.deviceInformationForm.validate(async (valid) => {
        if (valid) {
          let res = null;
          //判断设备创建时间是否为空
          if (this.deviceInformation.creatTime === "") {
            //新增
            //发送添加请求
            let time = new Date();
            let nowTime = this.$timestampToTime(
              time.toLocaleString("en-US", { hour12: false }).split(" ")
            );
            //获取当前时间
            this.deviceInformation.creatTime = nowTime;
            res = await deviceInformationApi.addDeviceInformationApi(
              this.deviceInformation
            );
          } else {
            let time = new Date();
            let nowTime = this.$timestampToTime(
              time.toLocaleString("en-US", { hour12: false }).split(" ")
            );
            //获取当前时间
            this.deviceInformation.creatTime = nowTime;
            //发送修改请求
            res = await deviceInformationApi.updateDeviceInformationApi(
              this.deviceInformation
            );
          }
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search(this.pageNo, this.pageSize);
            //关闭窗口
            this.deviceInformationDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
  },
};
</script>

<style></style>
